<template>
  <div class="alar-box">
    <div class="add-user-btn" @click="openUserModel(1)">
      <span>新建用户库</span>
    </div>
    <el-table
      max-height="734"
      :data="tableData"
      style="
        width: 100%;
        margin-top: 12px;
        background-color: #303136;
        color: #ffff;
      "
      :border="false"
    >
      <el-table-column prop="nickname" label="用户名"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="postNo" label="工号"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="dept" label="所属部门"></el-table-column>
      <el-table-column prop="role" label="功能角色"></el-table-column>
      <el-table-column prop="isDisable" label="状态">
        <template slot-scope="scope">
          <span style="color: #3ad76e" v-if="scope.row.isDisable === 0"
            >启用</span
          >
          <span style="color: #e6873a" v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="lastLoginTime" label="最后登录时间">
      </el-table-column>

      <el-table-column prop="opration" label="操作">
        <template slot-scope="scope">
          <span class="opration-btn" @click="openUserModel(3, scope.row)"
            >编辑</span
          >
          <span
            class="opration-btn"
            v-if="scope.row.isDisable == 0"
            @click="handleClick(1, scope.row)"
            >停用</span
          >
          <span class="opration-btn" v-else @click="handleClick(0, scope.row)"
            >启用</span
          >
          <span class="opration-btn" @click="updatePwd(scope.row)"
            >更新登录信息</span
          >

          <span class="opration-btn" @click="updateFaceDialog(scope.row)"
            >更新打卡信息</span
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="table-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeArr"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <user-setting
        v-if="dialogVisible"
        :modeType="modeType"
        :adminInfo="adminInfo"
        @onClose="closeUserModel"
      ></user-setting>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="更新登录信息"
      :visible.sync="pwdVisible"
      width="30%"
    >
      <update-pwd
        v-if="pwdVisible"
        :adminInfo="adminInfo"
        @onClose="closeUserModel"
      ></update-pwd>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="更新打卡信息"
      :visible.sync="addVisible"
      width="35%"
      @close="closeRegisterModel"
    >
      <register-admin-face
        ref="registerFace"
        @onClose="closeRegisterModel"
        :admin-id="adminId"
      ></register-admin-face>
    </el-dialog>
  </div>
</template>

<script>
import UserSetting from "./components/userManage/UserSetting.vue";
import UpdatePwd from "./components/userManage/UpdatePwd.vue";
import RegisterAdminFace from "@/views/home/components/RegisterAdminFace";
import { getAdminList, editAdmin } from "@/api/admin";

export default {
  components: {
    UserSetting,
    UpdatePwd,
    RegisterAdminFace,
  },
  data() {
    return {
      adminId: 0,
      addVisible: false,
      dialogVisible: false,
      dialogTitle: "编辑用户",
      tableData: [],
      adminInfo: {},
      pwdVisible: false,
      totalCount: 0,
      pageNo: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
    };
  },
  mounted() {
    this.pageNo = 1;
    this.getAdminList();
  },
  methods: {
    updateFaceDialog(row) {
      this.addVisible = true;
      this.adminId = row.id;
    },
    closeRegisterModel() {
      this.addVisible = false;
      this.$refs.registerFace.cancelModel();
    },
    closeUserModel(e) {
      this.dialogVisible = false;
      this.pwdVisible = false;
      if (e.isClose) {
        this.pageNo = 1;
        this.tableData = [];
        this.getAdminList();
      }
    },
    //编辑/新增用户
    openUserModel(type, row = {}) {
      this.dialogVisible = true;
      this.modeType = type;
      if (type == 1) {
        this.dialogTitle = "新建用户";
      } else {
        this.dialogTitle = "编辑用户";
        this.adminInfo = row;
      }
    },

    async getAdminList() {
      let res = await getAdminList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      });

      if (res.code == 200) {
        this.tableData = Array.from(
          new Set([...this.tableData, ...res.data.lists])
        );

        this.totalCount = res.data.count;
      }
    },

    //重置密码
    updatePwd(data) {
      this.pwdVisible = true;
      this.adminInfo = data;
    },

    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.tableData = [];
      this.getAdminList();
    },
    handleCurrentChange(e) {
      this.pageNo = e;
      this.tableData = [];
      this.getAdminList();
    },
    //启动停用状态
    async handleClick(type, scope) {
      let index = this.tableData.findIndex((item) => item.id == scope.id);
      this.tableData[index]["isDisable"] = type;
      await editAdmin({
        id: scope.id,
        roleIds: scope.roleIds,
        isDisable: type,
        password: "",
        nickname: scope.nickname,
        username: scope.username,
        deptIds: scope.deptIds,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-user-btn {
  width: 118px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background: #5cfbff;
  color: #17181a #17181a;
  border-radius: 4px;
  cursor: pointer;
}

.opration-btn {
  display: inline-block;
  color: #fff;
  background: #40414d;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 12px;
  margin-right: 16px;
  margin-top: 16px;
}

.level-color {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.table-pagination {
  text-align: right;
  margin: 30px 0;
}
</style>
